<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <link rel="stylesheet" type="text/css" href="../css/wenjuanxiangqing.css" />
    <title>问卷详情</title>
</head>
<body>
    <div id="detail">
        <!-- <div class="title">
            <div class="til">吃辣椒好吗？有人说吃辣椒可以排毒</div>
            <div class="data">
                <span class="time">参与人数20156</span>
                <span class="time">2017年9月19日</span>
            </div>
        </div>
        <div class="content">
            <ul>
                <li>
                    <div class="question">1、世界上是先有蛋还是先有鸡？</div>
                    <div class="li radio">先有蛋，后有鸡</div>
                    <div class="li radio active">后有蛋，先有鸡</div>
                </li>
                <li>
                    <div class="question">2、北京奥运会是哪一年召开的？</div>
                    <div class="li radio active">2008</div>
                    <div class="li radio">2017</div>
                </li>
                <li>
                    <div class="question">3、请选择下面你觉得对的选项</div>
                    <div class="li checkbox active">你是1991年出生的</div>
                    <div class="li checkbox">你有两个姐姐</div>
                    <div class="li checkbox">你是在2016年6月24日毕业</div>
                </li>
            </ul>
        </div> -->
    </div>
    <!-- 详情模板 begin -->
    <script type="text/html" id="detail-template">
        <div class="title">
            <div class="til">{{title}}</div>
            <div class="data">
                <span class="time">参与人数{{quantity}}</span>
                <span class="time">{{time_start.split(' ')[0]}}</span>
            </div>
        </div>
        <div class="content">
            <ul>
                {{each questions $item $key}}
                    <li data-id="{{$key+1}}">
                        <div class="question" data-id="{{$item.id}}">{{$key+1}}、{{$item.question}}</div>
                        {{each $item.answer $it $k}}
                            <div class="li {{{'1':'radio','2':'checkbox'}[$item.is_radio]}}" data-id="{{$it.id}}" onclick="fnSelect(this)">{{$it.answer}}</div>
                        {{/each}}
                    </li>
                {{/each}}
            </ul>
        </div>
    </script>
    <!-- 详情模板 end -->
    <div class="submit" onclick="fnSubmit()">问卷提交</div>
</body>
<script type="text/javascript" src="../framework/template-web.js"></script>
<script type="text/javascript" src="../script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../script/base.js"></script>
<script type="text/javascript">
    fnDetails();
    function fnDetails(){
        //活动详情
        fnAjax({
            url: "Questionnaire/detail",
            data: fnGetUrlParam(),
        }, function(ret){
            if( !ret.status ){
                if(ret.data){
                    fnValue('#detail',template('detail-template',ret.data));
                }
            }else{
                
            }
        });
    }
    
    //选择答案
    function fnSelect(_el){
        var cla = $(_el).attr('class');
        if(cla.indexOf('radio') != -1){
            if(cla.indexOf('active') != -1){
 
            }else{
                var _pa = $(_el).parent();
                _pa.find(".li").removeClass('active');
                $(_el).addClass('active');
            }
        }else if(cla.indexOf('checkbox') != -1){
            if(cla.indexOf('active') != -1){
                $(_el).removeClass('active');
            }else{
                $(_el).addClass('active');
            }
        }
    }

    //提交问卷
    function fnSubmit(){
        _fn(function(_an){
                fnAjax({
                url: "Questionnaire/submitQuestionnaire",
                data: {
                    questionnaire_id:fnGetUrlParam('id'),
                    answer: _an,
                    user_id:2
                },
            }, function(ret){
                console.log(ret);
                if( !ret.status ){
                    fnToast(ret.msg,function(){
                        fnOpen("index.html");
                    }); 
                }else{
                    fnToast(ret.msg); 
                }
            });
        })

        
        function _fn(cb){
            var an = [];
            $('li').each(function(_index,_item){
                var ac = $(_item).find('.active');
                var num = $(_item).find('.question').attr('data-id');
                if(ac.length){
                    var answer = [];
                    $.each(ac,function(_in,_it){
                        var a = $(_it).attr('data-id');
                        answer.push(a);
                    })
                    var ob = {
                        question_id: num,
                        answer: answer.join(',')
                    };
                    an.push(ob);
                }else{
                    fnToast('请完成第'+$(_item).attr('data-id')+'题'); 
                    return;
                }
            })
            if( an.length >= $('li').length){
                cb&&cb(an);
            }
        }
    }
</script>
</html>
